/*
 * @Author: yangzonglong
 * @Date: 2020-05-11 11:24:32
 * @version: v1.0.0
 * @Descripttion: 通用Loading组件
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-08-20 17:11:00
 * @Auditor:
 */
import React, { memo, useEffect, useState, useRef } from 'react';
import LoadingUI from './LoadingUI';
import styles from './loading.module.scss';

let time = 200;

interface IProps {
  visible: boolean;
  hideMask?: boolean;
}

const Loading = ({ visible, hideMask }: IProps) => {
  const [isLoading, setIsLoading] = useState(false);
  const timeout = useRef<number | null>(null);

  useEffect(() => {
    if (timeout.current) {
      clearTimeout(timeout.current);
      timeout.current = null;
    }
    
    timeout.current = window.setTimeout(() => {
      setIsLoading(visible);
      timeout.current = null;
    }, time);
  }, [visible]);
  
  return (
    <div>
      {visible && <div className={styles.mask} />}
      {!hideMask && isLoading && <div className="ant-modal-mask" />}
      {isLoading && <LoadingUI />}
    </div>
  );
};

export default memo(Loading);
